<!--
 * @Description: 
 * @Date: 2024-05-15 14:39:22
 * @LastEditTime: 2024-09-03 09:14:01
-->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '申请列表',
    navigationBarTextStyle: 'white', //标题栏字体颜色
    navigationBarBackgroundColor: '#0063AF', //标题栏背景色(纯色)
  },
}
</route>
<template>
  <view class="case w-screen min-h-100vh box-border bg-#F4F5F9">
    <!-- <wd-tabs v-model="tab" @change="handleChange">
      <block v-for="item in tabs" :key="item">
        <wd-tab :title="`${item}`" :name="item"></wd-tab>
      </block>
    </wd-tabs> -->
    <view class="p-20rpx">
      <view
        class="px-20rpx py30rpx bg-#fff rounded-15rpx mb-20rpx"
        v-for="item in myApply"
        :key="item.id"
      >
        <view
          v-if="tab == '案件查询'"
          class="flex justify-between items-center"
          @click="handleAnJianClick(item.id)"
        >
          <view class="flex flex-col">
            <text class="text-28rpx text-#000 mb-10rpx">
              提交日期：{{ formatTime(item.createTime, 'yyyy-MM-dd HH:mm:ss') }}
            </text>
            <text class="text-28rpx text-#000">被查人姓名：{{ item.partyName }}</text>
          </view>
          <button
            :class="[typeColor[item.status]]"
            class="h-60rpx text-24rpx flex mx-0 justify-center items-center bg-#FFD4D4 text-#EC2828"
          >
            {{ getType(item.status) }}
          </button>
        </view>
        <view v-else class="flex justify-between items-center" @click="handleJianChaClick(item.id)">
          <view class="flex flex-col">
            <text class="text-28rpx text-#000 mb-10rpx">检察官姓名：{{ item.acceptUserName }}</text>
            <text class="text-28rpx text-#000 mb-10rpx">预约日期：{{ item.requestTime }}</text>
            <text class="text-28rpx text-#000">
              提交日期：{{ formatTime(item.createTime, 'yyyy-MM-dd HH:mm:ss') }}
            </text>
          </view>
          <button
            :class="[typeColor[item.status]]"
            class="h-60rpx text-24rpx flex mx-0 justify-center items-center bg-#FFD4D4 text-#EC2828"
          >
            {{ getType(item.status) }}
          </button>
        </view>
      </view>
      <wd-status-tip
        v-if="myApply.length == 0"
        :image-size="{
          height: 200,
          width: 300,
        }"
        image="search"
        tip="当前搜索无结果"
      />
    </view>
    <wd-loadmore v-if="myApply.length > 0" :state="state" @reload="loadmore" />
  </view>
</template>
<script setup lang="ts">
import { getRecordListAPI, getJianChaListAPI } from '@/service/index/foo'
import { useUserStore } from '@/store'
import { formatTime } from '@/utils/index'
const tabs = ref(['案件查询', '检察官接访'])
const tab = ref('案件查询')
const state = ref<string>('loading')
const pages = reactive({
  pageNo: 1,
  pageSize: 10,
})
const myApply = ref([])
const max = ref<number>(60)
const recordList = ref([])
const jieChaList = ref([])
const userStore = useUserStore()
const typeColor = {
  0: 'type0',
  1: 'type1',
  2: 'type2',
  3: 'type3',
}
const typeList = [
  {
    value: 1,
    label: '审核中',
  },
  {
    value: 2,
    label: '审核通过',
  },
  {
    value: 3,
    label: '审核驳回',
  },
]
onLoad(() => {
  getTabOneList()
})
onReachBottom(() => {
  if (myApply.value.length === max.value) {
    state.value = 'finished'
  } else if (myApply.value.length < max.value) {
    pages.pageNo += 1
    loadmore()
  }
})
onPullDownRefresh(async () => {
  pages.pageNo = 1
  myApply.value.length = 0
  if (tab.value == '案件查询') {
    await getTabOneList()
  } else {
    await getTabTwoList()
  }
  uni.stopPullDownRefresh()
})
function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    if (tab.value == '案件查询') {
      getTabOneList()
    } else {
      getTabTwoList()
    }
  }, 1000)
}
const getType = computed(() => {
  return function (index) {
    return typeList.filter((item) => {
      return item.value == index
    })[0].label
  }
})

function getTabOneList() {
  return getRecordListAPI({ openId: userStore.userInfo.openid, ...pages }).then((res) => {
    myApply.value.push(...res.data.list)
    max.value = res.data.total
    myApply.value.length == max.value ? (state.value = 'finished') : (state.value = 'loading')
  })
}
function getTabTwoList() {
  return getJianChaListAPI({ openId: userStore.userInfo.openid, ...pages }).then((res) => {
    myApply.value.push(...res.data.list)
    max.value = res.data.total
    myApply.value.length == max.value ? (state.value = 'finished') : (state.value = 'loading')
  })
}
function handleChange(value) {
  state.value = 'loading'
  myApply.value.length = 0
  pages.pageNo = 1

  if (value.index == 0) {
    getTabOneList()
  } else {
    getTabTwoList()
  }
}

function handleAnJianClick(id) {
  uni.navigateTo({
    url: `/pages/myApply/anJjian?id=${id}`,
  })
}
function handleJianChaClick(id) {
  uni.navigateTo({
    url: `/pages/myApply/jianCha?id=${id}`,
  })
}
</script>
<style lang="scss" scoped>
.content {
  line-height: 120px;
  text-align: center;
}

::v-deep .wd-tabs__body {
  overflow: auto;
}

.type0 {
  color: #e6a23c;
  background: #fdf6ec;
}

.type1 {
  color: #409eff;
  background: #d9ecff;
}

.type2 {
  color: #ec2828;
  background: #ffd4d4;
}

.type3 {
  color: #67c23a;
  background: #e1f3d8;
}
</style>
